<template>
	<view>
		<uni-forms ref="form" :modelValue="current" :rules="rules" validate-trigger="bind" err-show-type="undertext">
			<view class="page-foot bg-white">
				<view class="foot-wrap flex-box flex-between m-hairline--top">
					<view class="foot-btn1" @click="submit(1)">下架保存</view>
					<view class="foot-btn2" @click="submit(2)">确定发布</view>
				</view>
			</view>
			<view class="container">
				<view class="upload-box" @click="upload(1)">
					<image class="img" v-if="current.image" :src="current.image" mode="aspectFill"></image>
					<image class="icon-upload" v-else src="/static/icon/icon_upload.png" mode="aspectFit">
					</image>

				</view>
				<view class="plr30">
					<view class="pt50 pb30 m-hairline--bottom">
						<view class="fs30 col89 mb25">小区名称</view>
						<view class="flex-box">
							<input type="text" v-model="current.village" class="heading" placeholder="请填写" />
							<!-- <view class="m-arrow-right fs30 col10 flex-grow-1" @click="chooseVillage()">
								{{village.name?village.name : '请选择'}}
							</view> -->
						</view>
					</view>

					<view class="pt50 pb30 m-hairline--bottom">
						<view class="fs30 col89 mb25">房源图片</view>
						<view class="upload flex-box flex-wrap flex-align-start">
							<view class="item" v-for="(item,index) in images">
								<image class="img" :src="item" mode="aspectFill"></image>
								<image class="icon-clear" @click="delImg(index)" src="/static/icon/icon_clear.png"
									mode="aspectFit"></image>
							</view>
							<view class="item btn" @click="upload(2)">
								<image class="icon" src="/static/icon/icon_upload1.png" mode="aspectFit"></image>
								<view class="fs24 cola tc">上传照片</view>
							</view>
						</view>
					</view>
					<view class="pb30">
						<uni-forms-item name="name">
							<view class="pt50 pb30 mb50 m-hairline--bottom">
								<view class="fs30 col89 mb25">房源标题</view>
								<input type="text" v-model="current.name" class="heading" placeholder="请填写" />
							</view>
						</uni-forms-item>
					</view>
					<view class="pb30">
						<view class="fs30 col89 mb30">房源类型</view>
						<view class="label-list flex-box flex-wrap">
							<block v-for="(item,index) in houseType">
								<view class="label" @click="checkType(index)" :class="index==houseTypeIndex?'active':''"
									style="padding: 0 20rpx;width: unset;">
									{{item.name}}
									<image class="icon-select" src="/static/icon/icon_gou.png" mode="aspectFit"></image>
								</view>
							</block>
						</view>
					</view>
					<view class="pb30" v-if="false">
						<view class="fs30 col89 mb30">租赁模式</view>
						<view class="label-list flex-box flex-wrap">
							<block v-for="(item,index) in rentalMode">
								<view class="label" @click="checkRentalMode(index)"
									:class="index==rentalModeIndex?'active':''">
									{{item.name}}
									<image class="icon-select" src="/static/icon/icon_gou.png" mode="aspectFit"></image>
								</view>
							</block>
						</view>
					</view>
					<view class="pb30" v-if="false">
						<view class="fs30 col89 mb30">是否委托</view>
						<view class="label-list flex-box flex-wrap">
							<view class="label" :class="current.is_public==1?'active':''" @click="checkPublic(1)">委托
								<image class="icon-select" src="/static/icon/icon_gou.png" mode="aspectFit"></image>
							</view>
							<view class="label" :class="current.is_public==0?'active':''" @click="checkPublic(0)">不委托
								<image class="icon-select" src="/static/icon/icon_gou.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>

					<picker mode="date" :value="decorationDate" @change="decorationDatePicker" v-if="false">
						<view class="pb30 mb50 m-hairline--bottom">
							<uni-forms-item name="fixturestime">
								<input v-model="current.fixturestime" type="text" hidden></input>
								<view class="fs30 col89 mb30">装修时间</view>
								<view class="m-arrow-right fs30 col3">
									{{current.fixturestime.length > 0 ? current.fixturestime : '请选择'}}
								</view>
							</uni-forms-item>
						</view>
					</picker>

					<picker mode="date" :value="buildDate" @change="buildDatePicker" v-if="false">
						<view class="pb30 mb50 m-hairline--bottom">
							<uni-forms-item name="buildingtime">
								<input v-model="current.buildingtime" type="text" hidden></input>
								<view class="fs30 col89 mb30">建造时间</view>
								<view class="m-arrow-right fs30 col3">
									{{current.buildingtime.length > 0 ? current.buildingtime : '请选择'}}
								</view>
							</uni-forms-item>
						</view>
					</picker>

					<view class="pb30 mb50 m-hairline--bottom" v-if="false">
						<uni-forms-item name="price">
							<view class="fs30 col89 mb30">价格</view>
							<view class="flex-box flex-align-baseline">
								<view class="fs20 col-normal">¥</view>
								<input type="number" class="fs40 fwb col-normal" v-model="current.price"
									style="width: 200rpx;" placeholder="0.00" placeholder-class="col-normal"></input>
								<view class="fs30 col89">月</view>
							</view>
						</uni-forms-item>
					</view>

					<view class="pb30 mb50 m-hairline--bottom flex-box flex-align-start">
						<uni-forms-item name="space">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">面积</view>
								<input type="number" class="fs30 col10" v-model="current.space" style="width: 100%;"
									placeholder="请输入" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>
						<uni-forms-item name="face">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">朝向</view>
								<input type="text" class="fs30 col10" v-model="current.face" style="width: 100%;"
									placeholder="请输入" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>

					</view>


					<view class="pb30 mb50 m-hairline--bottom flex-box flex-align-start">
						<uni-forms-item name="floor_num">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">总楼层</view>
								<input type="number" class="fs30 col10" v-model="current.floor_num" style="width: 100%;"
									placeholder="请输入" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>
						<uni-forms-item name="face">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">房号</view>
								<input type="text" class="fs30 col10" v-model="current.room_number" style="width: 100%;"
									placeholder="例;4-2-301" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>
						<!-- 	<uni-forms-item name="space">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">步梯/电梯</view>
								<input type="number" class="fs30 col10" v-model="current.ladder" style="width: 100%;"
									placeholder="请输入" placeholder-class="col10"></input>
							</view>
						</uni-forms-item> -->

					</view>
					<view class="pb30 mb50 m-hairline--bottom flex-box flex-align-start">

						<uni-forms-item name="room_num">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">几室</view>
								<input type="number" class="fs30 col10" v-model="current.room_num" style="width: 100%;"
									placeholder="请输入" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>

						<uni-forms-item name="ting_num">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">几厅</view>
								<input type="number" class="fs30 col10" v-model="current.ting_num" style="width: 100%;"
									placeholder="请输入" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>

						<uni-forms-item name="wei_num">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">几卫</view>
								<input type="number" class="fs30 col10" v-model="current.wei_num" style="width: 100%;"
									placeholder="请输入" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>
					</view>

					<view class="pb30">
						<view class="fs30 col89 mb30 marbtm">电梯/步梯</view>
						<view class="label-list flex-box flex-wrap">
							<block v-for="(item,index) in carParkArr">
								<view class="label" @click="checkCarParkType(index)"
									:class="index==carParkIndex?'active':''" style="padding: 0 20rpx;width: unset;">
									{{item.name}}
									<image class="icon-select" src="/static/icon/icon_gou.png" mode="aspectFit"></image>
								</view>
							</block>
						</view>
					</view>

					<view class="pb30" v-for="(item,index) in comment" :key="index">
						<view class="fs30 col89 mb30">{{item.name}}</view>
						<view class="label-list flex-box flex-wrap">
							<block v-for="(v,s_index) in item.tags" :key="s_index">
								<view class="label" :class="v.is_check==true?'active':''"
									@click="choose(index,s_index)">
									{{v.name}}
									<image class="icon-select" src="/static/icon/icon_gou.png" mode="aspectFit"></image>
								</view>
							</block>
						</view>
					</view>
					<!-- add -->
					<view class="pb30 mb50 m-hairline--bottom flex-box flex-align-start">
						<uni-forms-item name="space">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">售价</view>
								<input type="number" class="fs30 col10" v-model="current.space" style="width: 100%;"
									placeholder="请填写" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>
						<uni-forms-item name="face">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">单价</view>
								<input type="text" class="fs30 col10" v-model="current.face" style="width: 100%;"
									placeholder="请填写" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>

					</view>
					<view class="pb30 m-hairline--bottom mb30">
						<uni-forms-item name="content">
							<view class="fs30 col89 mb30">房源地址</view>
							<textarea :adjust-position="true" class="heading" v-model="current.content"
								style="height: 200rpx;" placeholder="请填写"></textarea>
						</uni-forms-item>
					</view>
					<view class="pb30 mb50 m-hairline--bottom flex-box flex-align-start">
						<uni-forms-item name="space">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">挂牌时间</view>
								<input type="number" class="fs30 col10" v-model="current.space" style="width: 100%;"
									placeholder="请填写" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>
						<uni-forms-item name="face">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">年代</view>
								<input type="text" class="fs30 col10" v-model="current.face" style="width: 100%;"
									placeholder="请填写" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>
					</view>
					<view class="pb30 mb50 m-hairline--bottom flex-box flex-align-start">
						<uni-forms-item name="space">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">物业费</view>
								<input type="number" class="fs30 col10" v-model="current.space" style="width: 100%;"
									placeholder="请填写" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>
						<uni-forms-item name="face">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">供热</view>
								<input type="text" class="fs30 col10" v-model="current.face" style="width: 100%;"
									placeholder="请填写" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>
					</view>
					<view class="pb30 mb50 m-hairline--bottom flex-box flex-align-start">
						<uni-forms-item name="space">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">供水</view>
								<input type="number" class="fs30 col10" v-model="current.space" style="width: 100%;"
									placeholder="请填写" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>
						<uni-forms-item name="face">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">供电</view>
								<input type="text" class="fs30 col10" v-model="current.face" style="width: 100%;"
									placeholder="请填写" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>
					</view>
					<view class="pb30 mb50 m-hairline--bottom flex-box flex-align-start">
						<uni-forms-item name="space">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">燃气</view>
								<input type="number" class="fs30 col10" v-model="current.space" style="width: 100%;"
									placeholder="请填写" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>
						<uni-forms-item name="face">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">容积率</view>
								<input type="text" class="fs30 col10" v-model="current.face" style="width: 100%;"
									placeholder="请填写" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>

					</view>
					<view class="pb30 mb50 m-hairline--bottom flex-box flex-align-start">
						<uni-forms-item name="space">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">绿化率</view>
								<input type="number" class="fs30 col10" v-model="current.space" style="width: 100%;"
									placeholder="请填写" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>
						<uni-forms-item name="face">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">封闭社区</view>
								<input type="text" class="fs30 col10" v-model="current.face" style="width: 100%;"
									placeholder="请填写" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>
					
					</view>
					<view class="pb30 mb50 m-hairline--bottom flex-box flex-align-start">
						<uni-forms-item name="space">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">人车分流</view>
								<input type="number" class="fs30 col10" v-model="current.space" style="width: 100%;"
									placeholder="请填写" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>
						<uni-forms-item name="face">
							<view class="flex-grow-1">
								<view class="fs30 col89 mb30">车位配比</view>
								<input type="text" class="fs30 col10" v-model="current.face" style="width: 100%;"
									placeholder="请填写" placeholder-class="col10"></input>
							</view>
						</uni-forms-item>
					
					</view>
					<!-- end -->
					<view class="pb30 m-hairline--bottom">
						<uni-forms-item name="content">
							<view class="fs30 col89 mb30">房间介绍</view>
							<textarea :adjust-position="true" class="heading" v-model="current.content"
								style="height: 200rpx;" placeholder="请填写"></textarea>
						</uni-forms-item>
					</view>
				</view>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	const core = require('@/xilu/core.js');
	export default {
		data() {
			return {
				rental_id: 0,
				userinfo: {},
				village: [], //小区
				comment: [], //标签
				rentalMode: [], //租赁模式,
				rentalModeIndex: 0,
				houseType: [], //房源类型
				houseTypeIndex: -1,
				images: [],

				// 步梯/电梯
				carParkArr: [{
						id: 1,
						name: '步梯'
					},
					{
						id: 2,
						name: '电梯'
					},
				],
				carParkIndex: 0,
				carParkid: 1,

				current: {
					image: '',
					village_id: 0,
					village: '',
					name: '',
					rental_mode_id: 0,
					house_type_id: 0,
					is_public: 1, //是否委托:1://委托，0不委托
					fixturestime: '',
					buildingtime: '',
					price: '0',
					space: '',
					face: '',
					floor_num: '',
					room_number: '',
					ting_num: '',
					room_num: '',
					wei_num: '',
					content: '',
					ladder: '',
				},
				rules: {
					image: {
						rules: [{
							required: true,
							errorMessage: '请上传缩略图'
						}]
					},
					village_id: {
						rules: [{
							required: true,
							errorMessage: '请上传缩略图'
						}]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入房源标题'
						}]
					},
					// house_type_id: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请选择房源类型'
					// 	}]
					// },
					// price: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请输入价格'
					// 	}]
					// },
					// fixturestime: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请选择装修时间'
					// 	}]
					// },
					// buildingtime: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请选择建造时间'
					// 	}]
					// },
					space: {
						rules: [{
							required: true,
							errorMessage: '请输入面积'
						}]
					},
					face: {
						rules: [{
							required: true,
							errorMessage: '请输入朝向'
						}]
					},
					floor_num: {
						rules: [{
							required: true,
							errorMessage: '请输入楼层'
						}]
					},
					ting_num: {
						rules: [{
							required: true,
							errorMessage: '请输入几厅'
						}]
					},
					room_num: {
						rules: [{
							required: true,
							errorMessage: '请输入几室'
						}]
					},
					wei_num: {
						rules: [{
							required: true,
							errorMessage: '请输入几卫'
						}]
					},
					content: {
						rules: [{
							required: true,
							errorMessage: '请输入房间介绍'
						}]
					},

				},
			}
		},
		onReady: function() {
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			this.fetchUserInfo();
			this.rental_id = options.rental_id || 0;
			if (this.rental_id) {
				this.fetchDetail();
			} else {
				this.fetchRentalMode();
				this.fetchTags();
				this.fetchHouseType();
			}
			let that = this;
			uni.$on("chooseVillage", function(data) {
				that.village = data;
				that.current.village_id = data.id;
			})
		},
		onUnload() {
			uni.$off("chooseVillage");
		},
		methods: {
			fetchUserInfo() {
				let that = this;
				core.get({
					url: '/api/xiluhouse.user/index',
					data: {},
					success: (ret) => {
						that.userinfo = ret.data;
					},
					loading: false
				});
			},
			fetchDetail() {
				let that = this;
				core.get({
					url: '/api/xiluhouse.broker/rental_detail',
					data: {
						rental_id: that.rental_id
					},
					success: (ret) => {
						that.current = ret.data;
						that.images = ret.data.images_arr;
						that.village = ret.data.village2;
						that.fetchRentalMode();
						that.fetchTags();
						that.fetchHouseType();
					},
					loading: false
				});
			},

			//选择小区
			chooseVillage() {
				if (this.userinfo.is_broker == 1) {
					uni.navigateTo({
						url: '/pages/rental/apply_add_community/apply_add_community?fromType=add_rental'
					})
				} else {
					uni.navigateTo({
						url: '/pages/rental/manage_community/manage_community?fromType=add_rental'
					})
				}
			},
			//获取租赁模式
			fetchRentalMode() {
				let that = this;
				core.get({
					url: 'api/xiluhouse.common/rental_mode',
					success: ret => {
						if (that.rental_id) {
							for (let i = 0; i < ret.data.length; i++) {
								if (ret.data[i].id == that.current.rental_mode_id) {
									that.rentalModeIndex = i;
									break;
								}
							}
						}
						that.rentalMode = ret.data;
					}
				});
			},
			//选择房屋类型
			checkRentalMode(index) {
				this.rentalModeIndex = index;
				this.current.rental_mode_id = this.rentalMode[index].id
			},
			//车库/位需求量
			checkCarParkType(index) {
				this.carParkIndex = index;
				this.carParkid = this.carParkArr[index].id;
				this.current.ladder = this.carParkArr[index].id;
			},
			//获取房屋属性
			fetchHouseType() {
				let that = this;
				core.get({
					url: 'api/xiluhouse.common/house_type',
					success: ret => {
						if (that.rental_id) {
							for (let i = 0; i < ret.data.length; i++) {
								if (ret.data[i].id == that.current.house_type_id) {
									that.houseTypeIndex = i;
									break;
								}
							}
						}
						that.houseType = ret.data;
					}
				});
			},
			//选择房屋类型
			checkType(index) {
				this.houseTypeIndex = index;
				this.current.house_type_id = this.houseType[index].id
			},
			//获取标签属性
			fetchTags() {
				let that = this;
				core.get({
					url: 'api/xiluhouse.common/rental_tags',
					data: {
						pageSize: 15
					},
					success: ret => {
						if (that.rental_id) {
							let house_tag_ids = that.current.house_tag_ids ? that.current.house_tag_ids.split(
								',') : [];
							if (house_tag_ids.length > 0) {
								for (let i = 0; i < ret.data.length; i++) {
									for (let j = 0; j < ret.data[i].tags.length; j++) {
										if (house_tag_ids.indexOf(ret.data[i].tags[j].id.toString()) !== -1) {
											ret.data[i].tags[j].is_check = true;
										}
									}

								}
							}
						}
						this.comment = ret.data
					}
				});
			},
			//选择标签属性
			choose(index, s_index) {
				let that = this;
				let data = that.comment
				let tags = data[index].tags
				if (data[index].multi_status == 2) {
					tags[s_index].is_check = !tags[s_index].is_check
				} else {
					tags.forEach(function(v, v_index) {
						if (v_index == s_index) {
							v.is_check = true
						} else {
							v.is_check = false
						}
					})
				}
				data[index].tags = tags
				that.comment = data;
				this.$forceUpdate();
			},
			//上传图片
			upload(type) {
				let that = this;
				let img = that.images
				let len = img.length;
				uni.chooseImage({
					count: 10 - len,
					success: res => {
						let files = res.tempFiles;
						files.map(item => {
							core.uploadFile({
								filePath: item.path,
								success: (ret, response) => {
									if (type == 1) {
										that.current.image = ret.data.url
									} else {
										img.push(ret.data.url)
										that.images = img;
									}
								}
							});
						});
					}
				});
			},

			delImg(index) {
				let images = this.images
				images.splice(index, 1)
				this.images = images
			},
			//选择是否委托
			checkPublic(type) {
				this.current.is_public = type
			},

			decorationDatePicker(e) {
				this.current.fixturestime = e.detail.value
			},
			buildDatePicker(e) {
				this.current.buildingtime = e.detail.value
			},

			submit(type) {
				let that = this;
				that.$refs.form.validate(valid => {
					if (!valid) {
						let form = that.current;
						if (!form.village) {
							uni.showToast({
								title: '请选择小区',
								icon: "none"
							})
							return false;
						}
						if (form.house_type_id <= 0) {
							uni.showToast({
								title: '请选择房源类型',
								icon: "none"
							})
							return false;
						}
						// if (form.price <= 0) {
						// 	uni.showToast({title: '请填写价格',icon: "none"})
						// 	return false;
						// }
						let images = that.images;
						if (images.length <= 0) {
							uni.showToast({
								title: '请上传房源图片',
								icon: "none"
							})
							return false;
						}
						form['images'] = images.join(',');
						let comment = that.comment;
						let ids = [];
						comment.forEach(function(item) {
							let id = item.id
							item.tags.forEach(function(v) {
								if (v.is_check == true) {
									ids.push({
										tag_type_id: id,
										tag_id: v.id
									})
								}
							})
						})
						form['tag'] = ids;
						if (type == 1) {
							form['status'] = 'hidden';
						} else {
							form['status'] = 'normal';
						}
						core.post({
							url: 'api/xiluhouse.broker/add_rental',
							data: form,
							loading: true,
							success: ret => {
								uni.showToast({
									title: ret.msg,
									icon: 'none',
									success: function() {
										uni.$emit("refreshRental", {})
										uni.navigateBack({
											delta: 1
										})
									}
								});
							}
						});
					} else {
						console.log('验证失败');
					}
				});
			},


		},

	}
</script>

<style scoped lang="less">
	.icon-search {
		padding: 5rpx;
		display: block;
		width: 40rpx;
		height: 40rpx;
	}


	.upload .item {
		position: relative;
		margin: 0 30rpx 30rpx 0;
		width: 200rpx;
		height: 156rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.upload .item:nth-of-type(3n) {
		margin: 0 0 30rpx;
	}

	.upload .item.btn {
		padding: 36rpx 0 0;
		background: #F7F9FC;
	}

	.upload .icon {
		margin: 0 auto 7rpx;
		display: block;
		width: 45rpx;
		height: 45rpx;
	}

	.upload .img {
		display: block;
		width: 200rpx;
		height: 156rpx;
	}

	.upload .icon-clear {
		position: absolute;
		right: 13rpx;
		top: 13rpx;
		display: block;
		width: 30rpx;
		height: 30rpx;
		z-index: 10;
	}


	.upload-box {
		position: relative;
		width: 750rpx;
		height: 500rpx;
		background: #F7F9FC;

		.icon-upload {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: block;
			width: 183rpx;
			height: 140rpx;
			z-index: 1;
		}

		.img {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 750rpx;
			height: 500rpx;
			z-index: 2;
		}
	}

	.heading {
		width: 690rpx;
		height: 88rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #101010;
		line-height: 44rpx;
	}

	.label-list {
		.label {
			position: relative;
			margin: 0 20rpx 20rpx 0;

			width: 150rpx;
			height: 66rpx;
			background: #F8F9FB;
			border-radius: 4rpx;
			border: 1px solid #EEEEEE;
			font-size: 26rpx;
			color: #333333;
			line-height: 66rpx;
			text-align: center;

			.icon-select {
				position: absolute;
				right: 0;
				bottom: -1rpx;
				display: none;
				width: 31rpx;
				height: 28rpx;
			}
		}

		.label:nth-of-type(4n) {
			margin: 0 0 20rpx;
		}

		.label.active {
			color: var(--normal);
			border: 1px solid var(--normal);

			.icon-select {
				display: block;
			}
		}
	}

	.page-foot {
		.foot-wrap {
			padding: 10rpx 60rpx;

			.foot-btn1 {
				width: 300rpx;
				height: 80rpx;
				border-radius: 40rpx;
				border: 1px solid var(--normal);
				font-size: 30rpx;
				color: var(--normal);
				line-height: 80rpx;
				text-align: center;
			}

			.foot-btn2 {
				width: 300rpx;
				height: 80rpx;
				border-radius: 40rpx;
				background: var(--normal);
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
			}
		}
	}
</style>